<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>曼巴oauth2.0权限中心</title>
	<!-- Tell the browser to be responsive to screen width -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Font Awesome -->


	<link rel="stylesheet" href="http://img.mabach.cn/index.css">
	<link  rel="stylesheet" href="http://img.mabach.cn/adminlte.min.css">
	<!-- Google Font: Source Sans Pro -->
	<!--  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">-->
</head>
<body class="hold-transition login-page">

<div class="login-box" id="app">
	<div class="login-logo">
		<a href="#">会员注册</a>
	</div>
	<!-- /.login-logo -->
	<div class="card">
		<div class="card-body login-card-body">
			<p class="login-box-msg">注册</p>


			<form >
				<div class="input-group mb-3">
					<input name="username" v-model="username" type="text" class="form-control" placeholder="请输入用户名">
					<div class="input-group-append">
						<div class="input-group-text">
							<span class="fa fa-user"></span>
						</div>
					</div>
				</div>
				<div class="input-group mb-3">
					<input name="password" v-model="password" type="password" class="form-control" placeholder="请输入密码">
					<div class="input-group-append">
						<div class="input-group-text">
							<span class="fas fa-lock"></span>
						</div>
					</div>
				</div>

				<div class="input-group mb-3">
					<input id="phone" v-model="phone" name="phone" type="text" class="form-control" placeholder="请输入手机号">
					<div class="input-group-append">
						<div class="input-group-text">
							<span class="fa fa-user"></span>
						</div>
					</div>
				</div>

				<div class="mb-3 row">
					<div class="col-6">
						<input type="text" v-model="code"  name="code" class="form-control" placeholder="验证码">
					</div>
					<div class="col-6">
						<input type="button" style="height:40px;width:140px;" :value="getcode" :disabled="flag" @click="sendCode()" id="sendCode"/>
						<!--            <a id="sendCode" th:attr="code_url=@{/code/mobile?mobile=}" class="btn  btn-outline-primary btn-large" href="#"> 获取验证码 </a>-->
					</div>
				</div>



				<div class="row">

					<div class="col-12">
						<button type="button" @click="register()" class="btn btn-primary btn-block">点击注册</button>
					</div>
					<!-- /.col -->
				</div>

			</form>


			<div class="social-auth-links text-center mb-3">

				<a href="/api-oauth/toQQLogin" class="btn btn-block btn-success">
					使用QQ注册
				</a>

			</div>



		</div>
		<!-- /.login-card-body -->
	</div>
</div>
<!-- /.login-box -->
<!-- jQuery -->
<script src="http://img.mabach.cn/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="http://img.mabach.cn/bootstrap.bundle.min.js"></script>



<!-- import Vue before Element -->
<script src="http://img.mabach.cn/vue.js"></script>
<!-- import JavaScript -->
<script src="http://img.mabach.cn/elementui.js"></script>
<script src="http://img.mabach.cn/axios.js"></script>



<script th:inline="javascript">
	var app= new Vue({
		el:"#app",
		data:{
			clock : '',
			nums :20,
			username:"",
			password:"",
			phone:"",
			code:"",
			getcode : "获取验证码",
			flag : false,


		},
		methods:{

			doLoop (){


				this.nums--;

				if(this.nums > 0){

					this.getcode = this.nums+'秒后可重新获取';

				}else{

					clearInterval(this.clock); //清除js定时器

					this.flag = false;

					this.getcode = "点击获取证码";

					this.nums = 20; //重置时间

				}

			},

			sendCode (){

				if(this.phone == '') {
					this.$message.error("手机号不能为空");
					return;
				}

				axios.post(`/api-oauth/code/mobile?mobile=${this.phone}`).then(response => {

					if (response.data.flag){
					this.$message.success("发送成功");

					this.flag = true; //将按钮置为不可点击

					this.getcode = this.nums+'秒后可重新获取';

					this.clock = setInterval(this.doLoop, 1000); //一秒执行一次

				}else {

					this.$message.error(response.data.message);

				}


			});
			},


			register (){

				if(this.username == '') {
					this.$message.error("用户名不能为空");
					return;
				}
				if(this.password == '') {
					this.$message.error("密码不能为空");
					return;
				}
				if(this.phone == '') {
					this.$message.error("手机号不能为空");
					return;
				}

				if(this.code == '') {
					this.$message.error("验证码不能为空");
					return;
				}


				var name=this.username;
				axios.post(`/api-portal/portal/signin?username=${this.username}&password=${this.password}&phone=${this.phone}&code=${this.code}`).then( response => {

					if (response.data.flag){
					// this.$message.success("注册成功");


					 // alert("/api-oauth/portal/prelogin?phone="+this.phone+"&code="+this.code+"&from="+[[${from}]])
					window.location="/api-portal/portal/prelogin?phone="+this.phone+"&code="+this.code+"&from="+[[${from}]]
					// window.location=[[${from}]]

				}else{
					this.$message.error(response.data.message);
				}





			});

			},

		}
	})
</script>
</body>
</html>
